<template>
	<div class="container">
		<div class="div-img">
			<div class="week">星期一</div>
			<div class="nongli">11月2日</div>
			<div class="year-month">2021-1-4</div>
		</div>
		<div class="day-detail">
			<span class="span1">当前年月</span>
			<span class="span2">2021年1月</span>
		</div>
		<div class="day-detail">
			<span class="span1">今年属相</span>
			<span class="span2">2021年1月</span>
		</div>
		<div class="day-detail">
			<span class="span1">农历年份</span>
			<span class="span2">2021年1月</span>
		</div>
		<div class="day-detail">
			<span class="span1">适宜事件</span>
			<span class="span2">2021年1月</span>
		</div>
		<div class="day-detail">
			<span class="span1">避免事件</span>
			<span class="span2">2021年1月</span>
		</div>
	</div>
</template>

<script>
	import { getData }from '../libs/requrst.js'
	export default{
		name: 'Day',
		mounted(){
			var daydetail = this.$store.state.daydetail
			// console.log(daydetail)   调试用
			getData('day','2021-1-5','daydetail')
			// console.log(this.daydetail)
		}
	}
</script>

<style lang="less" scoped="scoped">
	.div-img{
		width: 94%;
		height: 2.1rem;
		margin: .1rem 3%;
		box-shadow: 2px 2px 5px 2px #ccc;
		border-radius: 10px;
		background-image: url(../../public/imger/01.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		.week{
			width: 100%;
			height: .3rem;
			font-size: .3rem;
			padding: 0 .7rem;
			color: #786C67;
		}
		.nongli{
			width: 100%;
			height: 1.1rem;
			font-size: .6rem;
			text-align: center;
			line-height: 1.1rem;
			color: #DB6E44;
		}
		.year-month{
			width: 100%;
			height: .7rem;
			font-size: .3rem;
			text-align: center;
			color: #8A7F82;
		}
	}
	.day-detail{
		width: 94%;
		height: .44rem;
		border: 1px solid #ccc;
		border-radius: 10px;
		margin-top: .18rem;
		margin-left: 3%;
		line-height: .4rem;
		.span1{
			font-size: .22rem;
			color: #ed4040;
			margin-left: .2rem;
		}
		.span2{
			margin-left: .4rem;
		}
	}
	
</style>
